/**
 *通用形select
 */
<template>
    <div>{{ optionValue }}</div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { findBySelectNameDefaultApi } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
    } from '@element-plus/icons-vue'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()

    const optionValue: Ref<any> = ref('')

    // const defaultValue = defineModel<any>({
    //     required: false,
    //     default: ''
    // })
    const newOptions: Ref<any[]> = ref([])
    const { 
        dictionary = {}, 
        value = '', 
        options = []
        } = defineProps<{
        dictionary?: any,
        value?: any,
        options?: any[],
    }>()
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        // tabelSearch: [data: any],
    }>()

    if(dictionary?.name) {
        findBySelectNameDefaultApi({
            name: dictionary?.name
        }).then((res: any) => {
            newOptions.value = res.data
            if (value || value == 0 || value == '') {
                for (let i in res.data) {
                    if (res.data[i].value == value) {
                        optionValue.value = res.data[i].label
                    }
                }
            } else {
                optionValue.value = value
            }
        })
    } else {
        if (options.length > 0) {
            for (let i in options) {
                if (options[i].value == value) {
                    optionValue.value = options[i].label
                }
            }
        } else {
            optionValue.value = value
        }
    }
    watch(() => value, (nval: any, oval) => {
        if (newOptions.value.length > 0) {
            for (let i in newOptions.value) {
                if (newOptions.value[i].value == value) {
                    optionValue.value = newOptions.value[i].label
                }
            }
        }
        
    })
    
</script>

<style lang="scss" scoped>
    
</style>